<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 0 auto;
            width: 400px;
            padding-top: 100px;
        }
        input {
            float: left;
        }
        .title {
            float: left;
            background: url(./images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        .true {
            background: url(./images/right.png) no-repeat left center;
            color: green;
        }
        .flase {
            background: url(./images/wrong.png) no-repeat left center;
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="password">
        <p class="title">请输入6~16位密码</p>
    </div>
    <script>
        var inp = document.querySelector('input');
        var p = document.querySelector('.title');

        inp.onblur = function (){
            if(this.value.length < 6 || this.value.length >16){
                p.className = 'title flase';
                p.innerHTML = '密码输入错误 请输入6~16位';
            }else {
                p.className = 'title true';
                p.innerHTML = '密码输入正确';
            }    
        }
    </script>
</body>
</html>